/**
 * Vue数据检测
 * 1. Vue会监视data中所有层次的数据
 * 2. 如何监测对象终端数据
 *  通过setter实现监视,且要在new Vue时就传入要监测的数据
 *  - 对象中后追加的数据,Vue默认不做响应式处理
 *  - 如需要给后添加的数据做响应式,使用API
 *     - Vue.set(target,key,val)
 *     - vm.$set(target,key,val)
 * 3. 如何监测数组中的数据
 *   通过包裹数组更新元素的方式实现,本质就是两件事:
 *   - 调用原生对应的方法对数组进行更新
 *   - 重新解析模板,进而更新页面
 * 4. 在Vue中修改数组中某个元素一定要用下面方法
 *   -  数组方法
 *      - push
 *      - unshift
 *      - pop
 *      - pop
 *      - reverse
 *      - sort
 *      - splice
 *   -  vue api
 *     - Vue.set
 *     - vm.$set
 * 5. 特别注意: Vue.set或vm.$set不能给VM或者VM的根数据对象添加属性
 * @type {boolean}
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		me: {
			name: "yushi",
			age: 20,
			weight: 180
		},
		friends: [
			{id: 1, name: "马冬梅", age: 19, sex: "女"},
			{id: 2, name: "周冬雨", age: 20, sex: "女"},
			{id: 3, name: "周杰伦", age: 21, sex: "男"},
			{id: 4, name: "温兆伦", age: 22, sex: "男"},
		],
		hobby: [
			'抽烟',
			'喝酒',
			'烫头'
		]
	},
	methods: {
		addSex() {
			// Vue.set(this.me, 'sex', '男')
			this.$set(this.me, 'sex', '男')
		},
		addHobby() {
			// this.hobby[2]='理发'  不生效
			this.hobby.splice(2, 1, '理发')
		},
		modifyFirstFriendsAge() {
			// 有服务于age的getter和setter
			this.friends[0].age = 40;
		}
	}
});
